import React from 'react'
import { ScaleS, ScaleT } from 'src/utils/ScreenUtil'
import { Text, View, StyleSheet } from 'react-native'
import PropTypes from 'prop-types'
import Dot from '../dot'
import { getMonthStrFromFullTime, getYearFromFullTime } from '../../utils/TimeUtil'

export default function WorkExperienceCard (props) {
  const { style, dataSource } = props
  return (
    <View style={style}>
      <View style={styles.workExperienceItemView}>
        <View style={styles.LeftView}>
          <View style={styles.leftItemView}>
            <Dot/>
            <Text style={styles.timeLabel}>{`${getYearFromFullTime(dataSource.beginTime)}.${getMonthStrFromFullTime(dataSource.beginTime)}`}</Text>
          </View>
          <View style={styles.leftCenterView}>
            <View style={styles.lineView}>
              <View style={styles.dots}>
                <View style={styles.dotItem}/>
                <View style={styles.dotItem}/>
                <View style={styles.dotItem}/>
                <View style={styles.dotItem}/>
                <View style={styles.dotItem}/>
                <View style={styles.dotItem}/>
              </View>
            </View>
          </View>
          <View style={styles.leftItemView}>
            <Dot/>
            <Text style={styles.timeLabel}>{`${getYearFromFullTime(dataSource.endTime)}.${getMonthStrFromFullTime(dataSource.endTime)}`}</Text>
          </View>
        </View>
        <View style={styles.rightView}>
          <View style={[styles.educationCenterRightView, { borderTopLeftRadius: ScaleS(10) }]}>
            <Text style={styles.workCompanyType}>{dataSource.positionName}</Text>
            <Text style={styles.workCompanyName}>{dataSource.companyName}</Text>
            <View style={styles.educationCenterRightLine}/>
          </View>
          <View style={[styles.educationCenterRightView, {
            borderBottomLeftRadius: ScaleS(10),
            paddingBottom: ScaleS(10)
          }]}>
            <Text style={styles.workCompanyContent}>{dataSource.achievement}</Text>
          </View>
        </View>
      </View>
    </View>
  )
}
WorkExperienceCard.propTypes = {
  dataSource: PropTypes.object,
  style: PropTypes.object
}
WorkExperienceCard.defaultProps = {
  dataSource: {}
}
const styles = StyleSheet.create({
  workExperienceItemView: {
    marginLeft: ScaleS(20),
    flexDirection: 'row',
    alignItems: 'flex-start'
  },
  LeftView: {
    alignItems: 'flex-start',
    marginTop: ScaleS(17)
  },
  leftCenterView: {
    marginLeft: ScaleS(4)
  },
  leftItemView: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  lineView: {
    alignItems: 'center'

  },
  dots: {
    alignItems: 'center',
    height: ScaleS(50),
    justifyContent: 'space-around'

  },
  dotItem: {
    width: ScaleS(2),
    height: ScaleS(2),
    borderRadius: ScaleS(2),
    backgroundColor: '#CDCDCD'
  },
  timeView: {
    marginLeft: ScaleS(10),
    justifyContent: 'space-between'
  },
  timeLabel: {
    color: '#000000',
    fontSize: ScaleT(18),
    fontWeight: 'bold',
    marginLeft: ScaleS(15)
  },
  rightView: {
    flex: 1
  },
  educationCenterRightView: {
    marginLeft: ScaleS(13),
    backgroundColor: '#F8F8F8',
    paddingTop: ScaleS(17),
    paddingHorizontal: ScaleS(19)
  },
  workCompanyType: {
    color: '#F4C30E',
    fontSize: ScaleT(18),
    fontWeight: '500'
  },
  workCompanyName: {
    color: '#A5A5A5',
    fontSize: ScaleT(13),
    fontWeight: '400',
    marginTop: ScaleS(4)
  },
  educationCenterRightLine: {
    backgroundColor: '#ffffff',
    height: ScaleS(1),
    marginTop: ScaleS(11)
  },
  workCompanyContent: {
    color: '#444444',
    fontSize: ScaleT(15),
    fontWeight: '400',
    lineHeight: ScaleS(23)
  }
})
